<template>
  <div>
    <div class="top-tips">
      <span class="tip-out">检定点输入需要将检定标志位设置为<span class="tip-in"> "需要检定";</span></span>
    </div>
    <table xss=removed class="table">
      <tr>
        <th>设备名称</th>
        <td colspan="2">
          <el-input class="input" placeholder="请输入设备名称" v-model="wswMachine.machineName" :disabled="wswMachine.id!=0"/>
        </td>
        <th>设备编号</th>
        <td colspan="2">
          <el-input class="input" placeholder="请输入设备编号" v-model="wswMachine.machineId" :disabled="wswMachine.id!=0"/>
        </td>
      </tr>
      <tr>
        <th>出厂编号</th>
        <td>
          <el-input class="input" placeholder="请输入出厂编号" v-model="wswMachine.factoryNumber"/>
        </td>
        <th>资产编号</th>
        <td>
          <el-input class="input" placeholder="请输入资产编号" v-model="wswMachine.assetNumber"/>
        </td>
        <th>设备管理员</th>
        <td>
          <el-input class="input" placeholder="请输入设备管理员" v-model="wswMachine.administrator"/>
        </td>
      </tr>
      <tr>
        <th>规格型号</th>
        <td>
          <el-input class="input" placeholder="请输入规格型号" v-model="wswMachine.machineModel"/>
        </td>
        <th>生产厂家</th>
        <td colspan="3">
          <el-input class="input" placeholder="请输入生产厂家" v-model="wswMachine.manufacture"/>
        </td>
      </tr>
      <tr>
        <th>运行状态</th>
        <td>
          <el-input class="input" placeholder="请输入运行状态" v-model="wswMachine.runningState"/>
        </td>
        <th>使用部门</th>
        <td>
          <el-input class="input" placeholder="请输入使用部门" v-model="wswMachine.storageLocation"/>
        </td>
        <th>购入价格</th>
        <td>
          <el-input class="input" placeholder="请输入购入价格" v-model="wswMachine.price"/>
        </td>
      </tr>
      <tr>
        <th>检定标志位</th>
        <td>
          <el-radio v-model="wswMachine.testBool" label="1">需要检定</el-radio>
          <el-radio v-model="wswMachine.testBool" label="0">不需检定</el-radio>
        </td>
        <th>购入时间</th>
        <td>
          <el-date-picker
            class="input"
            v-model="wswMachine.purchaseDate"
            type="date"
            placeholder="请选择购入时间">
          </el-date-picker>
        </td>
        <th>启用时间</th>
        <td>
          <el-date-picker
            class="input"
            v-model="wswMachine.startDate"
            type="date"
            placeholder="请选择启用时间">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <th>送检单位</th>
        <td colspan="5">
          <el-input class="input" placeholder="请输入尺寸" v-model="wswMachine.inspectionEnterprise"/>
        </td>
      </tr>
      <tr>
        <th>尺寸</th>
        <td>
          <el-input class="input" placeholder="请输入尺寸" v-model="wswMachine.size"/>
        </td>
        <th>功率</th>
        <td>
          <el-input class="input" placeholder="请输入功率" v-model="wswMachine.power"/>
        </td>
        <th>净重</th>
        <td>
          <el-input class="input" placeholder="请输入净重" v-model="wswMachine.weight"/>
        </td>
      </tr>
      <tr v-if="wswMachine.testBool == '1'">
        <th>检定周期</th>
        <td>
          <el-input class="input" placeholder="请输入检定周期" v-model="wswMachine.testCycle"/>
        </td>
        <th>最近检查日</th>
        <td>
          <el-date-picker
            class="input"
            v-model="wswMachine.testDate"
            type="date"
            placeholder="请选择最近检查日">
          </el-date-picker>
        </td>
        <th>下次检定日(有效期至)</th>
        <td>
          <el-date-picker
            class="input"
            v-model="wswMachine.termOfValidity"
            type="date"
            placeholder="请选择下次检定日">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <th>采购人</th>
        <td>
          <el-input class="input" placeholder="请输入采购人" v-model="wswMachine.purchaser"/>
        </td>
        <th>验收人</th>
        <td>
          <el-input class="input" placeholder="请输入验收人" v-model="wswMachine.acceptor"/>
        </td>
        <th>责任人</th>
        <td>
          <el-input class="input" placeholder="请输入责任人" v-model="wswMachine.personLiable"/>
        </td>
      </tr>
      <tr>
        <th colspan="6">技术指标</th>
      </tr>
      <tr>
        <th colspan="6">
          <el-input
            class="input"
            type="textarea"
            :rows="10"
            placeholder="请输入技术指标"
            v-model="wswMachine.technicalIndicators"/>
        </th>
      </tr>
      <tr v-if="this.wswMachine.id">
        <td colspan="6">
          <el-button type="info" @click="openMakir('设备图片')">打开设备图片文件夹</el-button>
          <el-button type="info" @click="openMakir('技术文档')">打开技术文档文件夹</el-button>
          <el-button type="info" @click="openMakir('检定证书')">打开检定证书文件夹</el-button>
          <el-button type="info" @click="openMakir('铭牌')">打开存放铭牌文件夹</el-button>
        </td>
      </tr>
    </table>
    <!--    检定点-->
    <div class="machine-test" v-if="wswMachine.testBool == '1'">
      <h3>检定点</h3>
      <el-form :model="wswMachine.machineTest" label-width="80px">
        <el-form-item label="检定点1" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint1"></el-input>
        </el-form-item>
        <el-form-item label="检定点2" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint2"></el-input>
        </el-form-item>
        <el-form-item label="检定点3" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint3"></el-input>
        </el-form-item>
        <el-form-item label="检定点4" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint4"></el-input>
        </el-form-item>
        <el-form-item label="检定点5" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint5"></el-input>
        </el-form-item>
        <el-form-item label="检定点6" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint6"></el-input>
        </el-form-item>
        <el-form-item label="检定点7" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint7"></el-input>
        </el-form-item>
        <el-form-item label="检定点8" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint8"></el-input>
        </el-form-item>
        <el-form-item label="检定点9" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint9"></el-input>
        </el-form-item>
        <el-form-item label="检定点10" class="machine-test-item">
          <el-input v-model="wswMachine.machineTest.testPoint10"></el-input>
        </el-form-item>
      </el-form>
      <hr/>
    </div>
    <div class="machine-submachine">
      <h3>附属设备</h3>
      <div class="add-machine-submachine">
        <el-form :model="machineSubmachine" label-width="80px">
          <el-form-item label="名称" class="machine-submachine-item">
            <el-input v-model="machineSubmachine.name"></el-input>
          </el-form-item>
          <el-form-item label="型号" class="machine-submachine-item">
            <el-input v-model="machineSubmachine.model"></el-input>
          </el-form-item>
          <el-form-item label="单价" class="machine-submachine-item">
            <el-input v-model="machineSubmachine.price"></el-input>
          </el-form-item>
          <el-form-item label="出厂编码" class="machine-submachine-item">
            <el-input v-model="machineSubmachine.factoryNumber"></el-input>
          </el-form-item>
          <el-form-item label="出厂日期" class="machine-submachine-item">
            <el-date-picker
              v-model="machineSubmachine.manufactureDate"
              style="width: 100%"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择出厂日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="购入日期" class="machine-submachine-item">
            <el-date-picker
              v-model="machineSubmachine.purchaseDate"
              style="width: 100%"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择购入日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="启用日期" class="machine-submachine-item">
            <el-date-picker
              v-model="machineSubmachine.startDate"
              style="width: 100%"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择启用日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="检定日至" class="machine-submachine-item">
            <el-date-picker
              v-model="machineSubmachine.testDateTo"
              style="width: 100%"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择检定日至">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="技术参数" class="machine-submachine-item">
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入技术参数"
              v-model="machineSubmachine.technicalParameter">
            </el-input>
          </el-form-item>
          <el-form-item class="machine-submachine-item">
            <el-button type="primary" round @click="addSubmachineItem">增加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          ref="multipleTable"
          :data="wswMachine.machineSubmachines"
          stripe
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="名称"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="model"
            label="型号"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="factoryNumber"
            label="出场编码"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="manufactureDate"
            label="出厂日期"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="purchaseDate"
            label="购入日期"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="startDate"
            label="启用日期"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="testDateTo"
            label="检定日至"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="technicalParameter"
            label="技术参数"
            show-overflow-tooltip
            style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis;"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button type="danger" round @click="removeSubmachineItem(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" plain @click="saveOrUpdate">保存</el-button>
    </div>
  </div>
</template>

<script>
import {getWswMachineById, addWswMachine, updateWswMachine, openLocalMakir} from "@/api/wsw-machine";
import {getMachineTestByMachineId} from "@/api/machine-test";
import {getMachineSubmachineListByMachineId} from "@/api/machine-submachine";

export default {
  data() {
    return {
      wswMachine: {
        id: 0,
        machineId: '',
        machineName: '',
        machineModel: '',
        factoryNumber: '',
        manufacture: '',
        assetNumber: '',
        price: '',
        purchaseDate: '',
        startDate: '',
        administrator: '',
        purchaser: '',
        acceptor: '',
        personLiable: '',
        size: '',
        power: '',
        weight: '',
        runningState: '',
        storageLocation: '',
        testBool: '',
        testCycle: '',
        testDate: '',
        termOfValidity: '',
        inspectionEnterprise: '',
        picPath: '',
        documentPath: '',
        certificatePath: '',
        nameplatePathpath: '',
        technicalIndicators: '',
        machineTest: {
          id: 0,
          machineId: '',
          testPoint1: '',
          testPoint2: '',
          testPoint3: '',
          testPoint4: '',
          testPoint5: '',
          testPoint6: '',
          testPoint7: '',
          testPoint8: '',
          testPoint9: '',
          testPoint10: '',
        },
        machineSubmachines: [],
      },
      machineSubmachine: {
        id: 0,
        machineId: '',
        name: '',
        model: '',
        price: '',
        factoryNumber: '',
        manufactureDate: '',
        purchaseDate: '',
        startDate: '',
        testDateTo: '',
        technicalParameter: '',
      },
      multipleSelection: [],
    }
  },
  created() {
    //修改
    if (this.$route.query.machineId) {
      let machineTest = {
        id: 0,
        machineId: '',
        testPoint1: '',
        testPoint2: '',
        testPoint3: '',
        testPoint4: '',
        testPoint5: '',
        testPoint6: '',
        testPoint7: '',
        testPoint8: '',
        testPoint9: '',
        testPoint10: '',
      };
      let id = this.$route.query.machineId;
      getWswMachineById({id: id}).then(res => {
        this.wswMachine = res.data;
        this.wswMachine.machineTest = machineTest;
        this.wswMachine.machineSubmachines = [];
        if (this.wswMachine.testBool === "1") {
          getMachineTestByMachineId({machineId: this.wswMachine.id}).then(res => {
            this.wswMachine.machineTest = res.data;
          })
        }
        getMachineSubmachineListByMachineId({machineId: this.wswMachine.id}).then(res => {
          this.wswMachine.machineSubmachines = res.data;
        })
      });
    } else {
      //新增
    }
  },
  methods: {
    cancel() {
      this.$router.push({
        path: '/machine'
      });
    },
    saveOrUpdate() {
      if (this.wswMachine.id) {
        updateWswMachine(this.wswMachine).then(res => {
          this.$notify({
            title: '成功',
            message: '修改成功！',
            type: 'success'
          });
          this.$router.push({
            path: '/machine'
          });
        })
      } else {
        addWswMachine(this.wswMachine).then(res => {
          this.$notify({
            title: '成功',
            message: '保存成功！',
            type: 'success'
          });
          this.$router.push({
            path: '/machine'
          });
        });
      }
    },
    setMachineSubmachineEmpty() {
      this.machineSubmachine = {
        id: 0,
        machineId: '',
        name: '',
        model: '',
        price: '',
        factoryNumber: '',
        manufactureDate: '',
        purchaseDate: '',
        startDate: '',
        testDateTo: '',
        technicalParameter: '',
      };
    },
    addSubmachineItem() {
      this.wswMachine.machineSubmachines.push(this.machineSubmachine);
      this.setMachineSubmachineEmpty();
    },
    removeSubmachineItem(row, index) {
      this.wswMachine.machineSubmachines.splice(index, 1);
    },
    openMakir(data) {
      openLocalMakir({
        name: data,
        id: this.wswMachine.id
      }).then(res => {

      })
    },
  }
}
</script>

<style scoped lang="scss">
.top-tips {
  margin: 0 auto;
  margin-top: 30px;
  width: 90%;

  .tip-out {
    color: red;
    font-size: 14px;

    .tip-in {
      font-weight: 600;
    }
  }
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  width: 90%;
}

table td, table th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
}

table thead th {
  background-color: #CCE8EB;
  width: 100px;
}

table tr:nth-child(odd) {
  background: #fff;
}

table tr:nth-child(even) {
  background: #F5FAFA;
}

.input {
  width: 100%;
}

.footer {
  width: 160px;
  float: right;
  margin-right: 76px;
  margin-bottom: 200px;
  margin-top: 50px;
}

.machine-test {
  width: 90%;
  margin: 30px auto;

  .machine-test-item {
    width: 49%;
    display: inline-block;
  }

  .machine-test-item:nth-child(2n) {
    float: right;
    margin-right: 1%;
  }
}

.machine-submachine {
  width: 90%;
  margin: 20px auto;

  .machine-submachine-item {
    display: inline-block;
  }

  .machine-submachine-item:nth-child(-n + 8) {
    width: 24%;
  }

  .machine-submachine-item:nth-child(9) {
    width: 85%;
  }
}
</style>
